import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import styles from '../css/successpay.module.css';
import yesImg from '../assets/yes.png';
import startTwoImg from '../assets/redstar.png';
import startOneImg from '../assets/nullstar.png';
import startThreeImg from '../assets/starthree.png';
// import defaultImg from './img/10006.webp';
import { imgUrl } from '../config'; // 导入imgUrl
const SuccessPay = () => {
    const navigate = useNavigate();
    const [data, setData] = useState([]);
    const [address, setAddress] = useState('');
    const [allPrice, setAllPrice] = useState('');

    useEffect(() => {
        // 从sessionStorage获取数据
        const jingquData = JSON.parse(sessionStorage.getItem("jingqu"));
        const addressData = sessionStorage.getItem("address");
        const priceData = sessionStorage.getItem("allPrice");

        setData(jingquData || []);
        setAddress(addressData || '');
        setAllPrice(priceData || '0.00');
    }, []);

    // 完成按钮点击
    const accomplish = () => {
        navigate('/home');
    };

    // 查看订单详情
    const page = () => {
        navigate('/orderPage');
    };

    // 跳转景区详情
    const details = (id, i) => {
        sessionStorage.setItem("jingid", id);
        sessionStorage.setItem("jingdata", JSON.stringify(data[i]));
        navigate('/scenicdetails');
    };

    // 渲染星星评分
    const renderStars = (score) => {
        const stars = [];
        for (let i = 0; i < 5; i++) {
            if (i < Math.floor(score)) {
                stars.push(<img src={startTwoImg} alt="" key={i} />);
            } else if (i === Math.floor(score) && score % 1!== 0) {
                stars.push(<img src={startThreeImg} alt="" key={i} />);
            } else {
                stars.push(<img src={startOneImg} alt="" key={i} />);
            }
        }
        return (
            <div className={styles.start}>
                {stars}
            </div>
        );
    };

    // 渲染推荐景区列表
    const rander = () => {
        return data.slice(0, 3).map((item, i) => (
            <div className={styles.libVideo} onClick={() => details(item.id, i)} key={item.id}>
                <img src={`${imgUrl}${item.img}`} alt="" />
                <div className={styles.content}>
                    <b>{item.name}</b>
                    <div className={styles.twoBlock}>
                        <p className={styles.play}>游玩榜</p>
                        <p className={styles.new}>新乡&nbsp;景区榜第1名</p>
                    </div>
                    <div className={styles.allstart}>
                        {renderStars(item.score || 0)}
                        <div className={styles.startText}>
                            <span>{item.score || 0}分</span>
                            <p>1000条评价</p>
                        </div>
                    </div>
                    <span id={styles.distance}>距离你26km</span>
                    <div className={styles.today}>
                        <p>可订明日</p>
                        <div className={styles.door}>
                            <p>门票</p>
                            <span>￥</span>
                            <b>80</b>
                            <p style={{ marginLeft: '-5px' }}>起</p>
                        </div>
                    </div>
                    <div className={styles.player}>
                        {item.must && <><b>必玩</b>•<span>{item.must}</span></>}
                    </div>
                </div>
            </div>
        ));
    };

    return (
        <div>
            {/* 支付成功提示 */}
            <div className={styles.big}>
                <img src={yesImg} alt="" />
                <p>支付成功</p>
            </div>

            {/* 支付信息 */}
            <div className={styles.address}>
                <span id="name">{address}</span>
                <h1 id="money">￥{allPrice}元</h1>
            </div>

            {/* 操作按钮 */}
            <div className={styles.ok} onClick={accomplish}>
                <p>完成</p>
            </div>

            <div className={styles.order} onClick={page}>
                <span>查看订单详情</span>
            </div>

            {/* 推荐景区 */}
            <div className={styles.like}>
                <div></div>
                <b>你可能还喜欢</b>
                <div></div>
            </div>

            <div className={styles.item}>
                {rander()}
            </div>
        </div>
    );
};

export default SuccessPay;    